<template>
  <div class="hello">
    <Hedar></Hedar>

    <div class="contentBox">
      <div class="logoImg">
        <p class="lOgin_search">
          <input type="text" name="" v-model="butsat" value="" />
          <router-link :to="{path:'/Search',query: { name:butsat}}">
            <span id="">搜索</span>
          </router-link>
        </p>
      </div>
      <div class="hellokugou">
        <ul>
          <li  @mouseenter="entersa1($event)" @mouseleave="leavesa1($event)">商品分类</li>
          <li  index="2"><router-link to="/Home">商城首页</router-link></li>
          <li index="3"><router-link :to="{path:'/Goods',query:{list:'0'}}">全部商品</router-link></li>
        </ul>
      </div>
      <div class="main_banner_f">
        <div class="main_banner">
          <ul class="main_banner_left">
            <li v-for="(item,index) in  datas1" @click="shuaxin()" v-bind:index="index" @mouseenter="enter1($event)" @mouseleave="leave1($event)"><router-link :to="{path:'/Goods',query: { id:item.value,list:'1'}}">{{item.label}}</router-link></li>
            <div @mouseenter="enters1($event)" @mouseleave="leaves1($event)" class="main_banner_leftmain">
              <div v-for="item in lists">
                <h5  @click="shuaxin()" :list="2"><router-link :to="{path:'/Goods',query: { id:item.value,list:'2'}}">{{item.label}}</router-link></h5>
                <p>
                  <span   @click="shuaxin()" v-for="itam in item.children" :list="3"><router-link :to="{path:'/Goods',query:{ id:itam.value,list:'3'}}">{{itam.label}}</router-link></span>
                </p>
              </div>
            </div>
          </ul>
        </div>
      </div>
      <div class="banner_img"></div>
  <!--筛选条-->
      <div class="screening">
        <p>
          <span @click="paixu($event)" class="pddp">综合</span>
          <span @click="paixu($event)">上架时间</span>
        </p>
        <!--<p></p>-->
      </div>
<!--商品列表-->
      <div class="goods_list">
        <ul v-if="goosLi">
          <li v-for="item  in  bulgPag">
            <router-link to="/Shopdetails" :to="{path:'/Shopdetails',query: { id:item.gdId}}"><img :src=myfilter(item.gdImg) /></router-link>

            <p> <router-link :to="{path:'/Shopdetails',query: { id:item.gdId}}">{{item.gdName}}</router-link></p>
            <p style="color:red;">￥{{item.gdPrice}}</p>
            <!--<p> <router-link :to="{path:'/Shopdetails',query: { id:item.gdId}}">{{item.gdName}}【赛文】欧式古典 欧式吊灯客厅灯欧式吊灯客厅灯欧式吊灯客厅灯欧式</router-link></p>-->
            <!--<p>已售:<span>200</span>评论:<span>200</span></p>-->
          </li>
        </ul>
        <ul v-if="!goosLi" style="font-size: 30px; line-height:700px;color:red;">
          该分类下暂无商品
        </ul>
      </div>
      <div class="pages_a">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage3"
            :page-size="12"
            layout="prev, pager, next, jumper"
            :total="counts">
          </el-pagination>
        </div>

      </div>
    </div>

    <Footers></Footers>
  </div>

</template>

<script>
  import Footers from'@/components/Footers'
  import Bton from'@/components/Bton'
  import Hedar from'@/components/Hedar'
  import options2 from '../../static/inputOptions'
  import options from '../../static/options'
  export default {
    data () {
      return {
        msg: '',
        bannerimg: [require('@/assets/bg1.png'),require('@/assets/bg2.png'),require('@/assets/bg3.png'),require('@/assets/bg4.png')],
        currentPage3: 1,
        bulgPag:'',
        pageId:'',
        listId:'',
        dsUrl:'',
        aatss:'',
        pages:1,
        counts:12,
        butsat:'',
        datas:[],
        datas1:[],
        lists:'',
        goosLi:true

      }
    },
    methods: {
      distul(){
        let that=this
        $.ajax({
          type: "GET",
          url:"http://www.wutongsd.com/awm/getWtCat",
          dataType: "json",
          beforeSend:function (xhr) {
            xhr. withCredentials=true
          },
          success: function(data){
            console.log(data)
            if(data){
              that.datas1=data
            }
          },
          error:function(aa){
//              console.log(aa)
          }
        });
      },
      shuaxin(){
        window.location.reload()
      },
      handleChange(value) {
//          console.log(value);
        for(var i=0;i<this.options.length;i++){
          if(this.options[i].value==value[0]){
            var sheng=this.options[i].label
            var ttl=this.options[i].children
            for(var j=0;j<ttl.length;j++){
              if(ttl[j].value==value[1]){
                var shi=ttl[j].label
                var ttd=ttl[j].children
                for(var k=0;k<ttd.length;k++){
                  if(ttd[k].value==value[2]){
                    var xian=ttd[k].label
                  }
                }
              }
            }
          }
        }
//          console.log(sheng,shi,xian)
//          console.log(this.options)
      },
      entersa1:function(e){
        $(".main_banner").show()
      },
      leavesa1: function(e){
        $(".main_banner").hide()
      },
      enter1: function(e){
        $(".main_banner").show()
        $(".main_banner_leftmain").show()
        this.msg=$(e.currentTarget).index()
        $(e.currentTarget).addClass("actives").siblings().removeClass('actives');
        this.lists=this.datas1[this.msg].children
//          console.log(this.lists)

      },
      leave1: function(e){
        $(".main_banner").hide()
        $(".main_banner_leftmain").hide()
        $(e.currentTarget).removeClass('actives');
      },
      enters1: function(e){
        $(".main_banner").show()
        $(e.currentTarget).show()
        $(".main_banner_left li").eq(this.msg).addClass("actives")
      },
      leaves1: function(e){
        $(".main_banner").hide()
        $(e.currentTarget).hide()
        $(".main_banner_left li").eq(this.msg).removeClass("actives")
      },
      menu() {
        window.scrollTo(0,0);
//        this.datas1=options2
      },
      myfilter(value){
        return 'http://wut1.oss-cn-beijing.aliyuncs.com/'+ value.split(';')[0]

      },
      getQueryString(name){
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.href.split('?')[1].match(reg);
        if (r != null){
          return decodeURI(r[2]);
        }
        return null;
      },
      paixu(e){
         this.aatss= $(e.currentTarget).index()
        $(e.currentTarget).addClass("pddp").siblings().removeClass('pddp');
        this.oneIndexpage(this.pages,this.pageId,this.listId,this.aatss)

      },
      handleSizeChange(val) {
//        console.log(`每页 ${val} 条`);
        this.pages=val
        this.oneIndexpage(this.pages,this.pageId,this.listId)
      },
      handleCurrentChange(val) {
//        console.log(`当前页: ${val}`);
        this.pages=val
        this.oneIndexpage(this.pages,this.pageId,this.listId)
      },
      oneIndexpage(page,gdsid,listId,taegets){
        if(taegets==0){
            if(listId==0){
              this.dsUrl= local2+"/selectGoodsByPrice.do?page="+page
            }else if(listId==1){
            this.dsUrl= local2+"/selectGoodsByPrice.do?page="+page+"&catParentid="+gdsid
          }else if(listId==2){
            this.dsUrl= local2+"/selectGoodsByPrice.do?page="+page+"&catId="+gdsid
          }else if(listId==3){
            this.dsUrl= local2+"/selectGoodsByPrice.do?page="+page+"&catSonid="+gdsid
          }
        }else if(taegets==1){
            if(listId==0){
              this.dsUrl= local2+"/selectGoodsByTime.do?page="+page
            }else if(listId==1){
            this.dsUrl= local2+"/selectGoodsByTime.do?page="+page+"&catParentid="+gdsid
          }else if(listId==2){
            this.dsUrl= local2+"/selectGoodsByTime.do?page="+page+"&catId="+gdsid
          }else if(listId==3){
            this.dsUrl= local2+"/selectGoodsByTime.do?page="+page+"&catSonid="+gdsid
          }
        }else if(taegets !=1 && taegets !=0){
          if(listId==1){
            this.dsUrl= local2+"/selectOneClass.do?page="+page+"&catParentid="+gdsid
          }else if(listId==2){
            this.dsUrl= local2+"/selectGoodsTwoClass.do?page="+page+"&catId="+gdsid
          }else if(listId==3){
            this.dsUrl= local2+"/selectGoodsByThreeClass.do?page="+page+"&catSonid="+gdsid
          }else if(listId==0){
            this.dsUrl= local2+"/selectGoodsAll.do?page="+page
          }
        }
        let that = this
        $.ajax({
          type: "get",
          url:that.dsUrl,
//          url: " http://192.168.3.124:8082/selectGoodsByThreeClass.do?page="+page+"&catSonid="+gdsid,
//           data: {username:$("#username").val(), content:$("#content").val()},
          dataType: "json",
          success: function(datas){
            console.log(datas)
            that.bulgPag = datas.list
            that.counts=datas.count
            if(datas.count==0){
              that.goosLi=false
            }else if(datas.count>0){
              that.goosLi=true
            }

          },
          error:function(aa){
//            console.log(aa)
          }
        })
      }

    },
    mounted:function(){
     this.pageId = this.getQueryString('id')
      this.listId = this.getQueryString('list')
      this.oneIndexpage(this.pages,this.pageId,this.listId)
      this.menu()
      this.distul()

    },
    components:{
      Footers,
      Bton,
      Hedar
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }


  a {
    color: #42b983;
  }
  .contentBox{
    width:100%;
    min-height:1050px;
    margin:0 auto;
  }
  .logoImg{
    width:100%;
    height:120px;
    background:url(../assets/logobig.png) no-repeat 30px 20px;
    overflow: hidden;
  }
  .logoImg .lOgin_search{
    width:490px;
    height:38px;
    margin:40px 0 0 282px;
  }
  .logoImg .lOgin_search input{
    width:408px;
    height:36px;
    background: #fff;
    float:left;
    border:1px solid #ff8328;

  }
  .logoImg .lOgin_search span{
    width:80px;
    height:38px;
    line-height: 38px;
    background:#ff8328;
    float:left;
    color:#eff4fa;
  }
  .logoImg .lOgin_search span:hover{
    cursor: pointer;
  }
  .hellokugou{
    width:1200px;
    height:46px;
    margin:0 auto;
    background:#ff8328;
  }
  .hellokugou ul{
    width:100%;
    height:100%;
    line-height: 46px;
  }
  .hellokugou ul li{
    float:left;
    width:196px;
    height:100%;
    font-size: 18px;
  }
  .hellokugou ul li:nth-child(1){
    /*padding:0 62px;*/
  }
  .hellokugou ul li:nth-child(1):hover{
    background:#ff7108;
  }
  .hellokugou ul li a{
    display: inline-block;
    width:100%;
    height:100%;
    color:#ffffff;
  }
  .hellokugou ul li:hover{
    background: #ff7108;
    cursor: pointer;
  }
  .hellokugou .active{
    background:#0c4a8f;
  }
  .main_banner_lefts{
    width:180px;
    height:436px;
    background:#4B4B4B;
    float: left;
    display: none;
    position:absolute;
    left:0;
    top:36px;
  }
  .main_banner_lefts li{
    width:180px;
    height:100px;
    display: block;
    margin:0;
    line-height: 100px;
    background: #eaeaea;
    color: #333333;
  }
  .main_banner_lefts li:nth-child(1){
    height:36px;
    line-height: 36px;
    background:#a1a1a1;
    color:#ffffff;
    background:#a1a1a1;
  }
  .main_banner_leftsmain{
    width:745px;
    height:436px;
    background:yellow;
    position:absolute;
    top:0;
    left:180px;
    display: none;
    font-size: 400px;
    z-index: 999;
  }
  .main_banner_lefts .actives{
    background: #ffffff;
  }
  .footer_header{
    width:1200px;
    height:450px;
    background: #eaeaea;
    margin:0 auto;
     margin-bottom: 40px;
  }
  .footer_header img{
    width:100%;
    height:143px;
    border-bottom:1px solid #dedede;
  }
  .footer_header2{
    width:100%;
    height:307px;
  }
  .footer_header2_left{
    width:136px;
    height:277px;
    padding:30px 0 0 80px;
    font-size: 11px;
    text-align: left;
    float:left;
  }
  .footer_header2_left p{
    text-align: left;
    height:32px;
  }
  .footer_header2_left img{
    width:125px;
    height:125px;
  }
  .footer_header2_right{
    width:984px;
    height:277px;
    padding-top:30px;
    float:left;
  }
  .footer_header2_right ul{
    width:20%;
    height:277px;
    float:left;
  }
  .footer_header2_right ul li{
    width:100%;
    height:20px;
    font-size: 12px;
  }
  .footer_header2_right ul li a{
    color:#929292;
  }.footer_header2_right ul li a:hover{
     color:red;
   }
  .footer_header2_right ul li:nth-child(1){
    height:30px;
    font-size: 14px;
    color:#666666;
  }
  .nav_fa{
    width:1200px;
    height:36px;
    margin:0 auto;
    position:relative;
  }
  .nav_list{
    width:100%;
    height:36px;
    line-height: 36px;
   background: #459dff;

  }
  .nav_list li{
    float:left;
    padding:0 40px;
    margin:0;

  }
  .nav_list li:nth-child(1){
    padding:0 60px;
  }
  .nav_list li a{
    color:#ffffff;
  }
  .nav_list li:hover{
    background: #0c4a8f;
  }
  .active{
    background:#0c4a8f;
  }
  .ss_btn{
    width:1200px;
    height:30px;
    line-height:30px;
    margin:0 auto;
    text-align: left;
    text-indent:20px;
  }
  .ss_box{
    width:1200px;
    min-height:200px;
    margin:0 auto 34px;
    border:1px solid #a1a1a1;
  }
  .ss_box dl{
    width:100%;
    min-height:40px;
    border-bottom:1px dashed #a1a1a1;
  }
  .ss_box dl dt{
    width:10%;
    height:40px;
    float:left;
    line-height:40px;
  }
  .ss_box dl dd{
    width:90%;
    min-height:100%;
    display: inline-block;
    margin-left:-3px;
  }
  .ss_box dl dd span{
    float:left;
    padding:10px 20px;
    height:20px;
  }
  .ss_box dl dd span a{
    color:black;
  }
  .ss_box dl dd span a:hover{
     color:red;
   }
  .banner_img{
    width:1200px;
    height:260px;
    background:url("../assets/gyr.png") no-repeat;
    background-size: 100% 100%;
    margin:0 auto;
  }
  .screening{
    width:1200px;
    /*height:65px;*/
    height:34px;
    margin:10px auto 0;
    background:#eeeeee;
  }
  .screening p{
    height:34px;
    width:100%;

  }
  .screening p:nth-child(1){
    width:100%;
    border-bottom:1px solid #e5e5e5;

  }
  .screening p:nth-child(2){
    background: url("../assets/商品列表_03.png") no-repeat top left;
  }
  .screening p:nth-child(1) span{
   float:left;
    width:80px;
    height:32px;
    line-height:34px;
    /*border:1px solid red;*/
  }
  .screening p:nth-child(1) span:hover{
    cursor:pointer;
    border:1px solid #ffc45e;
  }
  .goods_list{
    width:1200px;
    height:1060px;
    margin:0 auto;
  }
  .goods_list ul{
    width:100%;
    height:100%;
  }
  .goods_list ul li{
    width:283px;
    height:308px;
    float:left;
    margin:16px 20px 0 0;
    border:1px solid #b5b5b5;
  }
  .goods_list ul li:nth-child(4n){
    margin-right:0;
  }
  .goods_list ul li img{
    width:259px;
    height:200px;
    margin-top:12px;
  }
  .goods_list ul li p{
    width:259px;
    line-height: 23px;
    height:auto;
    margin:0 auto;
    text-align: left;
    font-weight: bold;
  }
  .goods_list ul li p a{
     color:black;
   }
  .goods_list ul li:hover{
    border:1px solid #ff7108;

  }
  .goods_list ul li:hover p a{
    color:#0c4a8f;
  }
  .goods_list ul li p span{
    padding-right: 33px;
  }
  .pages_a{
    width:1200px;
    height:90px;
    margin:0 auto;
    padding-top:50px;
  }
  .guess_you_like{
    width:1200px;
    height:400px;
    margin:0 auto;
  }
  .guess_you_like_p{
    text-align: left;
    line-height: 20px;
  }
  .guess_you_like_p span{
    margin-right:60px;
    font-size: 16px;
  }
  .guess_you_like ul{
    width:100%;
    height:380px;
  }
  .guess_you_like ul li{
    width:283px;
    height:308px;
    float:left;
    margin:16px 20px 0 0;
    border:1px solid #b5b5b5;
  }
  .guess_you_like ul li:nth-child(4n){
    margin-right:0;
  }
  .guess_you_like ul li img{
    width:259px;
    height:200px;
    margin-top:12px;
  }
  .guess_you_like ul li p{
    width:259px;
    line-height: 23px;
    height:auto;
    margin:0 auto;
    text-align: left;
    font-weight: bold;
  }
  .guess_you_like ul li p span{
    padding-right: 33px;
  }
  .pddp{
    background:#f5f5f5;
    color:#ff7108;
    border-bottom: 1px solid #ff7108;
  }
  .main_banner_f{
    width:1199px;
    /*height:3px;*/
    /*background: #42B983;*/
    margin:0 auto 0;
    font-size: 12px;
    border-right: 1px #eaeaea solid;
    /*border-bottom: 1px #eaeaea solid;*/
    position: relative;
  }
  .main_banner{
    width:1199px;
    height:400px;
    /*background: #42B983;*/
    margin:0 auto 40px;
    font-size: 12px;
    /*border-right: 1px #eaeaea solid;*/
    /*border-bottom: 1px #eaeaea solid;*/
    display: none;
    position:absolute;
    left:0;
    top:0;
  }
  .main_banner_left{
    width:180px;
    height:436px;
    background:#4B4B4B;
    float: left;
  }
  .main_banner_left{
    width:195px;
    height:401px;
    position:relative;
    background:#ff7108;
  }
  .main_banner_left li{
    width:195px;
    height:71.7px;
    display: block;
    margin:0;
    line-height: 100px;
    background: #ff8328;
    color: #333333;
    font-size: 15px;
    font-weight: bold;
    border-bottom: 1px dashed #ffffff;
  }
  .main_banner_left li a{
    color: #333333;
  }
  .main_banner_leftmain{
    width:745px;
    min-height:436px;
    background:#f1f1f1;
    position:absolute;
    top:0;
    left:199px;
    display: none;
    font-size: 13px;
    z-index: 999;
    box-shadow: 1px 1px 1px 1px #888888;
  }
  .main_banner_leftmain div{
    width:745px;
    min-height:43px;
    /*background: red;*/

  }
  .main_banner_leftmain div h5{
    width:20%;
    height:100%;
    float:left;
    line-height: 30px;
  }
  .main_banner_leftmain div h5 a{
    color:black;
    font-size: 13px;
  }
  .main_banner_leftmain div h5 a:hover{
    color:red;
  }
  .main_banner_leftmain div p{
    width:80%;
    min-height:43px;
    float:left;
    text-align: left;
    overflow: hidden;

  }
  .main_banner_leftmain div p span{
    display: inline-block;
    padding:10px 15px;
  }
  .main_banner_left .actives{
    background: #ff7108;
  }
  a{
    color:black;
  }
  a:hover{
    cursor: pointer;
    color:red;
  }

</style>
